<template>
    <view class="main" @click="getEvent">
        <uni-nav-bar :title="`${addEditFlag == 'edit' ? '编辑' : '添加'}工单`" backgroundColor="#63a4f0" color="#222C33"
            statusBar="true" @clickLeft="back()" left-icon="arrowleft">
        </uni-nav-bar>
        <view class="infoContent">
            <!-- <view class="bg"></view> -->
            <view class="content">
                <uni-forms ref="form" :rules="rules" :model="orderInfoData">
                    <view class="details">
                        <view class="info" v-if="addEditFlag == 'edit'">
                            <view class="label">工单号：</view>
                            <view class="text ellipsis">{{ orderInfoData.reportNo }}</view>
                        </view>
                        <view class="info">
                            <view class="label">工单类型：</view>
                            <view class="text ellipsis">{{ reportType ? '报工单' : '送货单' }}</view>
                        </view>
                        <view class="info">
                            <view class="label">项目订单号：</view>
                            <view class="text ellipsis">{{ orderInfoData.projectNo }}</view>
                        </view>
                        <view class="info">
                            <view class="label">所属执行单号：</view>
                            <view class="text ellipsis">{{ orderInfoData.executeNo }}</view>
                        </view>
                        <view class="info">
                            <view class="label">业务运营方：</view>
                            <view class="text ellipsis">{{ orderInfoData.providerName }}</view>
                        </view>
                        <view class="info">
                            <view class="label">服务项目名称：</view>
                            <view class="text ellipsis">{{ orderInfoData.name }}</view>
                        </view>
                        <view class="info">
                            <view class="label">服务提供方：</view>
                            <view class="text ellipsis">{{ orderInfoData.organizationName }}</view>
                        </view>
                        <view class="info">
                            <view class="label">终端用户方：</view>
                            <view class="text ellipsis">{{ orderInfoData.memberName }}</view>
                        </view>
                        <view class="info" v-if="addEditFlag == 'edit'">
                            <view class="label">创建人：</view>
                            <view class="text ellipsis">{{ orderInfoData.createUserName }}</view>
                        </view>
                    </view>
                    <view class="formInfoData" v-if="reportType == 0">
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/time.png" mode="heightFix" />
                                <view class="infoLabel">送货时间：</view>
                            </view>
                            <view class="text">
                                <uni-forms-item name="deliverTime" :rules="rules.deliverTime">
                                    <uni-datetime-picker type="datetime" v-model="orderInfoData.deliverTime"
                                        placeholder="点击选择" @change="bindDateTimeChange" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/address.png" mode="heightFix" />
                                <view class="infoLabel">送货地点：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="address" :rules="rules.address">
                                    <u--input v-model="orderInfoData.address" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info productList">
                            <view class="label">货物详情：</view>
                            <view class="text ">
                                <view class=" productInfo" v-for="info, index in orderInfoData.productList"
                                    :key="index">
                                    <view class="product ">
                                        <image class="left-img" src="@/static/order/nongzi.png" mode="heightFix" />
                                        <view class="formsItem">
                                            <span>货名：</span>
                                            <uni-forms-item :name="['productList', index, 'productName']"
                                                :rules="rules.productName">
                                                <u--input v-model="info.productName" placeholder="请输入" />
                                            </uni-forms-item>
                                        </view>
                                    </view>
                                    <view class="product ">
                                        <image class="left-img" src="@/static/order/num.png" mode="heightFix" />
                                        <view class="formsItem">
                                            <span>数量：</span>
                                            <uni-forms-item :name="['productList', index, 'num']" :rules="rules.num">
                                                <u--input type="number" v-model="info.num" placeholder="请输入"
                                                    @change="handleAmount(index)" />
                                            </uni-forms-item>
                                        </view>
                                    </view>
                                    <view class="product ">
                                        <image class="left-img" src="@/static/order/je.png" mode="heightFix" />
                                        <view class="formsItem">
                                            <span>单价：</span>
                                            <uni-forms-item :name="['productList', index, 'price']"
                                                :rules="rules.price">
                                                <u--input type="number" v-model="info.price" placeholder="请输入"
                                                    @change="handleAmount(index)" />
                                            </uni-forms-item>
                                        </view>
                                    </view>
                                    <view class="product ">
                                        <image class="left-img" src="@/static/order/hj.png" mode="heightFix" />
                                        <view class="formsItem">
                                            <span>合计：</span>
                                            <uni-forms-item :name="['productList', index, 'amount']"
                                                :rules="rules.amount">
                                                <u--input disabled type="number" v-model="info.amount"
                                                    placeholder="请输入" />
                                            </uni-forms-item>
                                        </view>
                                    </view>
                                    <view class="btnList">
                                        <view class="btn" @click="addProduct()"
                                            v-show="orderInfoData.productList.length == index + 1">添加</view>
                                        <view class="btn delBtn" @click="delProduct(index)"
                                            v-show="orderInfoData.productList.length > 1">删除</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/je.png" mode="heightFix" />
                                <view class="infoLabel">金额总计(元)：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="reportAmount" :rules="rules.reportAmount">
                                    <u--input type="number" v-model="orderInfoData.reportAmount" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/je.png" mode="heightFix" />
                                <view class="infoLabel">备注(非必填)：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="remark">
                                    <u--input v-model="orderInfoData.remark" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/yy.png" mode="heightFix" />
                                <view class="infoLabel">送货人：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="deliverPerson" :rules="rules.deliverPerson">
                                    <u--input v-model="orderInfoData.deliverPerson" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/image.png" mode="heightFix" />
                                <view class="infoLabel">凭证图片：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="reportUrl" :rules="rules.reportUrl">
                                    <view class="upLoadCompent">
                                        <u-upload :fileList="orderInfoData.imgList" @afterRead="afterRead"
                                            @delete="deletePic" multiple :maxCount="3">
                                            <view style="display: flex;">
                                                <view class="uploadImage">上传图片</view>
                                            </view>
                                        </u-upload>
                                    </view>
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                    <view class="formInfoData" v-if="reportType == 1">
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/time.png" mode="heightFix" />
                                <view class="infoLabel">服务时间：</view>
                            </view>
                            <view class="text">
                                <uni-forms-item name="beginEndTime" :rules="rules.beginEndTime">
                                    <uni-datetime-picker class="datetimerange" type="datetimerange" rangeSeparator="至"
                                        v-model="orderInfoData.beginEndTime" placeholder="点击选择"
                                        @change="beginEndTimeChange" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/address.png" mode="heightFix" />
                                <view class="infoLabel">服务地点：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="address" :rules="rules.address">
                                    <u--input v-model="orderInfoData.address" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/je.png" mode="heightFix" />
                                <view class="infoLabel">服务面积：</view>
                            </view>
                            <view class="text reportAmount">
                                <uni-forms-item class="" name="num" :rules="rules.num">
                                    <u--input type="number" v-model="orderInfoData.num" placeholder="请输入" />
                                </uni-forms-item>
                                <view class="unit">{{ orderInfoData.unit || '亩' }}</view>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/yy.png" mode="heightFix" />
                                <view class="infoLabel">服务人员：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item class="" name="workerList" :rules="rules.workerList">
                                    <mySelectCheckbox ref='mySelectCheckbox2' :value="orderInfoData.workerList"
                                        v-if="resetSelect" :zindex="2" svalue="value" slabel="text" placeholder="请选择"
                                        :options="userList" @change="e => { $set(orderInfoData, 'workerList', e) }">
                                    </mySelectCheckbox>
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/mushu.png" mode="heightFix" />
                                <view class="infoLabel">农机设备：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item class="" name="deviceList" :rules="rules.deviceList">
                                    <mySelectCheckbox ref='mySelectCheckbox1' :value="orderInfoData.deviceList"
                                        v-if="resetSelect" :zindex="1" svalue="deviceName" slabel="deviceName"
                                        placeholder="请选择" :options="organizationDeviceList"
                                        @change="e => { $set(orderInfoData, 'deviceList', e) }">
                                    </mySelectCheckbox>
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/nongzi.png" mode="heightFix" />
                                <view class="infoLabel">使用详情：</view>
                            </view>
                            <view class="text">
                                <uni-forms-item name="agriculturalProductionUsage"
                                    :rules="rules.agriculturalProductionUsage">
                                    <u--input v-model="orderInfoData.agriculturalProductionUsage" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/edit.png" mode="heightFix" />
                                <view class="infoLabel">备注：</view>
                            </view>
                            <view class="text">
                                <uni-forms-item name="remark">
                                    <u--input v-model="orderInfoData.remark" placeholder="请输入" />
                                </uni-forms-item>
                            </view>
                        </view>
                        <view class="info">
                            <view class="label">
                                <image class="left-img" src="@/static/order/image.png" mode="heightFix" />
                                <view class="infoLabel">凭证图片：</view>
                            </view>
                            <view class="text ">
                                <uni-forms-item name="reportUrl" :rules="rules.reportUrl">
                                    <view class="upLoadCompent">
                                        <u-upload :fileList="orderInfoData.imgList" @afterRead="afterRead"
                                            @delete="deletePic" multiple :maxCount="3">
                                            <view style="display: flex;">
                                                <view class="uploadImage">上传图片</view>
                                            </view>
                                        </u-upload>
                                    </view>
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                </uni-forms>
                <view class="addEditBtn" @click="confirm">保存</view>
            </view>
        </view>
    </view>
</template>

<script>
import workOrderApi from '@/api/socialized-servce/person-message/work-order.js'
import reportDeliverApi from '@/api/socialized-servce/person-message/reportDeliver.js'
import reportWorkApi from '@/api/socialized-servce/person-message/reportWork.js'

import mySelectCheckbox from "./components/multipleSelect.vue"
import { agrServiceUrl } from '@/config/baseUrl.js'
export default {
    components: {
        mySelectCheckbox
    },
    data() {
        return {
            loading: false,
            imgLoadming: false,
            resetSelect: true,
            current: 0,
            orderInfoData: {},
            imgUrlList: [],
            reportType: -1,
            formData: {},
            reportExecuteObj: {},
            addEditFlag: '',
            reportNo: '',
            userList: [],
            organizationDeviceList: [],
            rules: {
                num: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }, {
                    pattern: /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
                    errorMessage: '数字需大于0',
                }],
                price: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }, {
                    pattern: /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
                    errorMessage: '数字需大于0'
                }],
                amount: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }, {
                    pattern: /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
                    errorMessage: '数字需大于0',
                }],
                productName: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }],
                deliverTime: [{
                    required: true,
                    errorMessage: '请选择',
                    trigger: ['change']
                }],
                address: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }],
                reportAmount: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }, {
                    pattern: /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
                    errorMessage: '数字需大于0',
                }],
                reportUrl: [{
                    required: true,
                    errorMessage: '请选择',
                    trigger: ['change']
                }],
                deliverPerson: [{
                    required: true,
                    errorMessage: '请输入',
                    trigger: ['change']
                }, {
                    pattern: /^[\u4e00-\u9fa5]{2,4}$/,
                    errorMessage: '请输入四字以内的文字',
                }],
                beginEndTime: [{
                    required: true,
                    errorMessage: '请选择',
                    trigger: ['change']
                }],
                workerList: [{
                    required: true,
                    errorMessage: '请选择',
                    trigger: ['change']
                }],
                deviceList: [{
                    required: true,
                    errorMessage: '请选择',
                    trigger: ['change']
                }],
            }
        }
    },
    onLoad(v) {
        this.reportNo = v ? v.reportNo : '';
        this.addEditFlag = v ? v.addEditFlag : '';
        this.reportType = v ? v.reportType : 0;
        this.reportType = Number(this.reportType)
        this.initData()
    },
    methods: {
        getEvent() {
            this.$refs.mySelectCheckbox1.close()
            this.$refs.mySelectCheckbox2.close()
        },
        initData() {
            this.reportExecuteObj = uni.getStorageSync('reportExecuteObj') ? JSON.parse(uni.getStorageSync('reportExecuteObj')) : {}
            if (this.addEditFlag == 'add') {
                this.orderInfoData = {
                    ...this.reportExecuteObj,
                    name: this.reportExecuteObj.projectName || '',
                    imgList: []
                };
                this.addProduct();

            } else if (this.addEditFlag == 'edit') {
                this.queryOrderInfo(this.reportNo, Number(this.reportType));
            }
            this.getresourceAllocationList();
            this.getUserList();
        },
        getUserList() {
            this.userList = [];
            workOrderApi.queryPartyUserByCondition({
                partyType: 3,
                active: true,
                partyNo: uni.getStorageSync('partyNo')//组织编号
            }).then(res => {
                this.userList = res.data || [];
                this.userList = this.userList.map(e => {
                    return {
                        value: e.systemUser.userName,
                        text: e.systemUser.userName
                    }
                })
                this.resetSelect = false;
                this.$nextTick(() => {
                    this.resetSelect = true;
                })
                console.log('人员列表：', this.userList)
            }).catch(err => {
                console.log(err)
            });

        },
        async getresourceAllocationList() {
            workOrderApi.resourceAllocationList({
                organizationNo: uni.getStorageSync("organizationNo"),
                providerNo: uni.getStorageSync("providerNo"),
                projectNo: this.reportExecuteObj.projectNo
            }).then(res => {
                this.organizationDeviceList = res.data || [];
                console.log('设备列表：', this.organizationDeviceList)
            }).catch(err => {
                console.log(err)
            })

        },

        async afterRead(event, index) {
            this.type = 'image'
            let lists = [].concat(event.file)
            let fileListLen = this.orderInfoData.imgList?.length
            lists.map((item) => {
                this.orderInfoData.imgList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                this.imgLoadming = true
                console.log(this.imgLoadming)
                const result = await this.uploadFilePromise(lists[i].url, index)
                this.imgLoadming = false
                console.log(this.imgLoadming)
                let item = this.orderInfoData.imgList[fileListLen]
                this.orderInfoData.imgList.splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: `${agrServiceUrl}${result.slice(1)}`
                }))
                this.getImageList();
                fileListLen++
            }
        },
        deletePic(event) {
            this.orderInfoData.imgList.splice(event.index, 1);
            this.getImageList();
            console.log(this.orderInfoData.imgList)
        },
        getImageList() {
            let reportUrlList = this.orderInfoData.imgList ? this.orderInfoData.imgList.map(e => e.url) : []
            this.$set(this.orderInfoData, 'reportUrl', reportUrlList.toString());
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: agrServiceUrl + `common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
                    filePath: url,
                    name: 'file',
                    header: {
                        'token': uni.getStorageSync("satoken") || ''
                    },
                    formData: {},
                    success: async (res) => {
                        const dataObj = JSON.parse(res.data);
                        const data = dataObj.data;
                        resolve(data);
                    },
                    fail: () => {
                        uni.showToast({
                            title: '图片上传失败',
                            icon: 'error'
                        })
                    }
                });
            })
        },
        formatDateTime(date) {
            // 格式化日期时间为YYYY-MM-DDTHH:mm:ss格式
            let year = date.getFullYear();
            let month = this.padStart(date.getMonth() + 1);
            let day = this.padStart(date.getDate());
            let hour = this.padStart(date.getHours());
            let minute = this.padStart(date.getMinutes());
            let second = this.padStart(date.getSeconds());
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        },
        padStart(value) {
            return value.toString().padStart(2, '0');
        },
        bindDateTimeChange(e) {
            this.orderInfoData.deliverTime = this.formatDateTime(new Date(e))
        },
        beginEndTimeChange(e) {
            console.log(e)
        },
        addProduct() {
            if (!this.orderInfoData.productList) {
                this.$set(this.orderInfoData, 'productList', [])
            }
            let index = this.orderInfoData.productList.length;
            console.log(index)
            this.$set(this.orderInfoData.productList, index, {
                amount: '',
                num: '',
                price: '',
                productName: ''
            })
        },
        delProduct(index) {
            let list = JSON.parse(JSON.stringify(this.orderInfoData.productList))
            list.splice(index, 1)
            this.$set(this.orderInfoData, 'productList', list)
        },
        change(e) {
            this.current = e.detail.current;
        },
        handleError(index) {
            this.$set(this.imgUrlList, index, {
                url: require('@/static/errImg.png')
            })
        },
        previewImage(index) {
            // 调用预览图片API
            uni.previewImage({
                current: index, // 当前显示图片索引
                urls: this.imgUrlList, // 需要预览的图片URL列表
            });
        },
        handleAmount(index) {
            let num = this.orderInfoData.productList[index].num || 0;
            let price = this.orderInfoData.productList[index].price || 0;
            this.orderInfoData.productList[index].amount = Number(num) * Number(price);
            this.orderInfoData.reportAmount = 0
            this.orderInfoData.productList.forEach(item => {
                this.orderInfoData.reportAmount += Number(item.amount || 0)
            })
        },
        queryOrderInfo(no, reportType) {
            if (no) {
                let api = null;
                if (reportType) {
                    api = workOrderApi.queryByNoReportWork
                } else {
                    api = workOrderApi.queryByNoReportDeliver
                }
                api(no).then(res => {
                    let data = res.data || {};
                    let srcList = data.reportUrl ? data.reportUrl.split(',') : [];
                    this.imgUrlList = srcList.map(url => {
                        return { url }
                    });
                    this.$set(this, 'orderInfoData', {
                        ...data,
                        beginEndTime: data.beginTime && data.endTime ? [data.beginTime, data.endTime] : [],
                        imgList: this.imgUrlList
                    })
                    this.resetSelect = false;
                    this.$nextTick(() => {
                        this.resetSelect = true;
                    })
                })
            } else {
                uni.showToast({
                    title: '为获取到详情',
                    icon: 'none'
                });
            }
        },
        confirm() {
            if (this.loading || this.imgLoadming) {
                uni.showToast({
                    title: this.imgLoadming ? '图片上传中' : '请稍等接口响应中...',
                    icon: 'none'
                });
                return
            }
            let addEditApi = null;
            if (this.reportType) {
                let timeList = this.orderInfoData.beginEndTime ? this.orderInfoData.beginEndTime : []
                this.orderInfoData.beginTime = timeList[0] || '';
                this.orderInfoData.endTime = timeList[1] || '';
                this.orderInfoData.mode = 2; //0.远程电子签名 1.现场电子签名 2.纸质签名(目前默认传2)
                addEditApi = reportWorkApi[this.addEditFlag]
            } else {
                addEditApi = reportDeliverApi[this.addEditFlag]
            }
            // let reportUrlList = this.orderInfoData.imgList ? this.orderInfoData.imgList.map(e => e.url) : []
            // this.$set(this.orderInfoData, 'reportUrl', reportUrlList.toString());
            this.$refs.form.validate().then(() => {
                this.loading = true
                addEditApi(this.orderInfoData).then(res => {
                    this.loading = false
                    if (res.code == 200) {
                        uni.showToast({
                            title: '操作成功',
                            icon: 'none'
                        });
                        let url = '/pages/socialized-service/work-order/worker-order-list'
                        this.$togo(url, {
                            reportExecuteId: uni.getStorageSync('reportExecuteId')
                        })
                    } else {
                        uni.showToast({
                            title: res.msg || '操作失败',
                            icon: 'none'
                        });
                    }
                }).catch(err => {
                    this.loading = false
                    uni.showToast({
                        title: '操作失败',
                        icon: 'none'
                    });
                })
            }).catch(err => {
                uni.showToast({
                    title: '请完善数据',
                    icon: 'none'
                });
                console.log('表单错误信息：', err);
            })
        },
        //返回上一步
        back() {
            uni.navigateBack({
                delta: 1,
            });
        },
    }

}
</script>

<style lang="scss" scoped>
.ellipsis {
    display: block;
    white-space: nowrap; //不换行
    overflow: hidden; //超出部分隐藏
    text-overflow: ellipsis; //文本溢出显示省略号
}

.infoContent {
    height: calc(100vh - 44px);
    position: relative;
    box-sizing: border-box;

    background: linear-gradient(to bottom, rgb(99, 164, 240) 30%, #F5F6FA 30%, #F5F6FA 40%);
    overflow-y: auto;

    .content {
        width: 100%;
        padding: 5vw;
        box-sizing: border-box;

        .info {
            width: 100%;
            font-size: 26rpx;
            padding: 3vw;
            display: flex;
            border-bottom: 1rpx solid #eeeeee;
            box-sizing: border-box;

            &:last-child {
                border: none
            }

            .label {
                width: 35vw;
                text-align: left;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .left-img {
                    margin-right: 2vw;
                    width: 5vw !important;
                    height: 5vw !important;
                }

                .infoLabel {
                    width: 25vw;
                }
            }

            .text {
                width: calc(100% - 25vw);

            }

            .reportAmount {
                display: flex;

                .unit {
                    width: calc(10vw);
                }
            }

            .swiper-item {
                background-color: #00000009;
                height: 100%;
            }

            .image-item {
                width: 100% !important;
                height: 100% !important;
                background-color: #00000009;
                border: 1px solid #cecece !important;
                box-sizing: border-box !important;
            }
        }

        .details {
            padding: 3vw;
            box-shadow: 0 0 10px 10px #00000009;
            background-color: #ffffff;
            border-radius: 3vw;
        }

        .formInfoData {
            .info {
                padding: 5vw;
                box-shadow: 0 0 10px 10px #00000009;
                background-color: #ffffff;
                border-radius: 3vw;
                margin-top: 3vw;
                box-sizing: border-box;
            }
        }

        .productList {
            width: 100%;
            padding: 0 !important;
            background: none !important;
            box-shadow: none !important;
            padding-bottom: 4vw;
            display: block;

            .label {
                margin: 2vw 0;
            }

            .text {
                width: 100%;
                font-size: 26rpx;

                .productInfo {
                    background-color: #EDEEF5;
                    margin-bottom: 3vw;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-wrap: wrap;
                    border-radius: 1vw;
                    padding: 1vw;

                    .product {
                        width: calc(50% - 2vw);
                        padding: 4vw 0;
                        margin: 1vw;
                        background-color: #ffffff;
                        border-radius: 2vw;
                        padding-left: 2vw;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;

                        .left-img {
                            margin-right: 1vw;
                            width: 4vw !important;
                            height: 4vw !important;
                        }

                        .formsItem {
                            width: calc(100% - 5vw);
                            display: flex;
                            align-items: center;

                            span {
                                display: inline-block;
                                width: 25vw;
                            }
                        }
                    }

                    &:last-child {
                        margin: 0;
                    }
                }
            }

            .btnList {
                width: 100%;
                display: flex;
                padding: 2vw;
                justify-content: flex-end;

                .btn {
                    margin-left: 3vw;
                    background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
                    color: #ffffff;
                    line-height: 7vw;
                    padding: 0 3vw;
                    border-radius: 7vw;
                    font-size: 24rpx;
                }

                .delBtn {
                    background: linear-gradient(270deg, #ff88b2 0%, #ff2151 100%);
                }
            }
        }

        .swiperList {
            padding: 4vw 0;
        }
    }
}

::v-deep .uni-date-x--border,
::v-deep .u-border {
    border: none;
}

::v-deep .uni-forms-item__label {
    display: none;
}

::v-deep .uni-forms-item {
    margin-bottom: 0;
}

::v-deep .uniui-calendar:before {
    display: none !important;
}

::v-deep .uni-date__x-input,
::v-deep .u-input {
    padding: 0 !important;
}

.datetimerange {
    ::v-deep .range-separator {
        display: none;
    }

    ::v-deep .uni-date-x {
        display: block;
    }

    ::v-deep .uniui-calendar {
        display: none;
    }

    ::v-deep .uni-date__x-input {
        text-align: left;
        color: rgb(192, 196, 204)
    }
}

.upLoadCompent {

    ::v-deep .u-upload__wrap__preview,
    .uploadImage {
        height: 22vw;
        width: 22vw;
        margin: 1vw;
        line-height: 22vw;
        color: #bbbbbb;
        text-align: center;
        border: 1px dashed #c7c7c7;
        border-radius: 2vw;
        background-color: #ffffff;
        overflow: hidden;
    }

    ::v-deep .u-upload__wrap__preview__image {
        width: 100% !important;
        height: 100% !important;
    }

    ::v-deep .uicon-close {
        font-size: 26rpx !important;
    }

    ::v-deep .u-upload__deletable {
        width: 4vw !important;
        height: 4vw !important;
        background-color: #f0632c !important;
        color: #ffffff !important;

        .u-upload__deletable__icon {
            top: 1vw;
        }
    }

    ::v-deep .u-upload__success {
        display: none;
    }
}

.addEditBtn {
    width: 30vw;
    height: 4vh;
    background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.29);
    border-radius: 3vh;
    text-align: center;
    line-height: 4vh;
    font-size: 26rpx;
    color: #ffffff;
    margin: 10vw auto;
}
</style>